<template>
  <el-card class="box-card">
    <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    <div v-if="!showDetail">
      <div class="table">
        <div class="container">
          <el-table
            v-loading="CheckUnitListLoading"
            :data="CheckUnitListTableData"
            max-height="800"
            style="width: 100%"
          >
            <el-table-column fixed prop="Id" label="序号" width="120">
            </el-table-column>
            <el-table-column prop="CheckUnit" label="检验单位" width="210">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  style="text-decoration: underline; color: #606266"
                  @click="gotoDetail(scope.row.CheckUnit)"
                  >{{ scope.row.CheckUnit }}</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="" label="检验单位核准证号" width="250">
            </el-table-column>
            <el-table-column prop="Address" label="单位地址" width="150">
            </el-table-column>
            <el-table-column prop="Manager" label="联系人" width="200">
            </el-table-column>
            <el-table-column prop="Telphone" label="联系电话" width="100">
            </el-table-column>
            <el-table-column prop="SydwCount" label="服务单位总数" width="100">
            </el-table-column>
            <el-table-column prop="GasCount" label="检验设备总数" width="100">
            </el-table-column>
            <el-table-column
              prop="GasCheckRecordCount"
              label="检验报告总数"
              width="100"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="page">
        <div class="container">
          <el-pagination
            background
            @size-change="checkUnitListTablePageSizeChange"
            @current-change="checkUnitListTablePageChange"
            :current-page="CheckUnitListCurrentPage"
            :page-sizes="[10, 15, 20, 40]"
            :page-size="CheckUnitListArgs.num"
            layout="total, sizes, prev, pager, next, jumper"
            :total="CheckUnitListTotal"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <div v-if="showDetail">
      <div class="detail-container">
        <div class="text-cards">
          <div class="text-card">
            <span class="yello">服务单位数量</span>
            <span class="yello">{{
              CheckUnitDetailData.SydwCount + "家"
            }}</span>
          </div>
          <div class="text-card">
            <span class="yello">检验气瓶总量</span>
            <span class="yello">{{ CheckUnitDetailData.GasCount + "只" }}</span>
          </div>
          <div class="text-card">
            <span class="red">临检单位(有临检设备)</span>
            <span class="red">{{
              CheckUnitDetailData.NeedCheckSydwCount + "家"
            }}</span>
          </div>
          <div class="text-card">
            <span class="red">临检设备(一个月内)</span>
            <span class="red">{{
              CheckUnitDetailData.NeedCheckGasCount + "只"
            }}</span>
          </div>
        </div>
        <div class="charts">
          <div class="chart">
            <div id="gas-check" style="min-width: 400px; height: 400px"></div>
          </div>
          <div class="chart">
            <div id="gas-type" style="min-width: 400px; height: 400px"></div>
          </div>
          <div class="chart">
            <div id="gas-media" style="min-width: 400px; height: 400px"></div>
          </div>
          <div class="chart">
            <div id="gas-warning" style="min-width: 400px; height: 400px"></div>
          </div>
        </div>
        <div class="table">
          <div class="container">
            <el-table
              v-loading="CheckUnitSydwListLoading"
              :data="CheckUnitSydwListTableData"
              height="400"
              style="width: 100%"
            >
              <el-table-column fixed prop="Id" label="序号" width="110">
              </el-table-column>
              <el-table-column prop="SydwName" label="使用单位" width="110">
              </el-table-column>
              <el-table-column prop="GasCount" label="设备量" width="110">
              </el-table-column>
              <el-table-column prop="WFGasCount" label="无缝气瓶" width="110">
              </el-table-column>
              <el-table-column prop="HJGasCount" label="焊接气瓶" width="110">
              </el-table-column>
              <el-table-column prop="TZGasCount" label="特种气瓶" width="110">
              </el-table-column>
              <el-table-column
                prop="GasNeedCheckCount"
                label="临检设备量"
                width="110"
              >
              </el-table-column>
              <el-table-column
                prop="GasHistoryCheckCount"
                label="历史检验气瓶量"
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="GasHistoryCheckPassRate"
                label="历史检验合格率"
                width="120"
              >
              </el-table-column>
              <el-table-column prop="Address" label="单位地址" width="200">
              </el-table-column>
              <el-table-column prop="Manager" label="联系人" width="110">
              </el-table-column>
              <el-table-column prop="Telphone" label="联系方式" width="110">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="page">
          <div class="container">
            <el-pagination
              background
              @size-change="checkUnitSydwListTablePageSizeChange"
              @current-change="checkUnitSydwListTablePageChange"
              :current-page="CheckUnitSydwListCurrentPage"
              :page-sizes="[5, 15, 20, 40]"
              :page-size="CheckUnitSydwListArgs.num"
              layout="total, sizes, prev, pager, next, jumper"
              :total="CheckUnitSydwListTotal"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import Breadcrumb from "../../../../components/QipingBreadCrumb/BreadCrumb.vue";
import {
  CheckUnitListSearchArgs,
  CheckUnitDetailSearchArgs,
  CheckUnitSydwListSearchArgs,
  searchCheckUnitList,
  searchCheckUnitDetailData,
  searchCheckUnitSydwList,
} from "../../../../api/qiping/data-service";
import Highcharts from "highcharts/highstock";
export default {
  data() {
    return {
      // 检验单位
      CheckUnit: "",

      // 显示模式
      showDetail: false, // 默认显示检验单位列表表格

      // 导航树相关数据
      naviBasicItems: [
        { text: "气瓶" },
        { text: "云服检验", to: "/qiping/dataservice/check" },
      ],
      naviItems: [],

      // 图表相关数据
      gasCheckChart: null,
      gasTypeChart: null,
      mediaChart: null,
      gasWarningChart: null,

      // 检验单位列表表格相关数据
      CheckUnitListLoading: true,
      CheckUnitListTableData: [],
      CheckUnitListTotal: 0,
      CheckUnitListCurrentPage: 1,
      CheckUnitListArgs: new CheckUnitListSearchArgs(),

      // 某个检验单位的详情统计数据
      CheckUnitDetailData: {},
      CheckUnitDetailArgs: new CheckUnitDetailSearchArgs(),

      // 检验单位的使用单位列表表格相关数据
      CheckUnitSydwListLoading: true,
      CheckUnitSydwListTableData: [],
      CheckUnitSydwListTotal: 0,
      CheckUnitSydwListCurrentPage: 1,
      CheckUnitSydwListArgs: new CheckUnitSydwListSearchArgs(),
    };
  },
  async created() {
    if (!this.$route.params.CheckUnit) {
      // url不带CheckUnit,进入检验单位列表表格界面
      // 表格界面的一些参数的初始化
      this.naviItems = [...this.naviBasicItems];
      this.showDetail = false;
      // 获取检验单位列表数据
      await this.searchCheckUnitList();
    } else {
      // url带CheckUnit，进入CheckUnit对应的详情界面
      // 详情界面的一些参数的初始化
      // 集成到当前项目后由于vue-admin-template的一些特性，一级菜单重定向时不能识别路由参数，故在此重新重定向一次
      if (this.$route.params.CheckUnit == ":CheckUnit") {
        this.$router.replace({
          name: "qiping-dataService-check",
        });
      }
      this.CheckUnit = this.$route.params.CheckUnit;
      console.log(this.CheckUnit);
      this.naviItems = [
        ...this.naviBasicItems,
        {
          text: this.CheckUnit,
          to: "/qiping/dataservice/check" + "/" + this.$route.params.CheckUnit,
          color: "red",
        },
      ];
      this.showDetail = true;
      // 获取检验单位的相关详细统计数据
      await this.searchCheckUnitDetailData();
      // 获取检验单位的使用单位的第一页数据
      await this.searchCheckUnitSydwList();
    }
  },
  components: {
    Breadcrumb,
  },
  methods: {
    // 获取检验单位列表数据
    async searchCheckUnitList() {
      this.CheckUnitListLoading = true;
      const res = await searchCheckUnitList(this.CheckUnitListArgs);
      this.CheckUnitListLoading = false;
      const { list, total } = res.data;
      this.CheckUnitListTableData = list;
      this.CheckUnitListTotal = +total;
    },
    // 检验单位列表表格页面大小改变
    async checkUnitListTablePageSizeChange(pageSize) {
      this.CheckUnitListArgs.num = pageSize;
      this.CheckUnitListArgs.offset = 0;
      await this.searchCheckUnitList();
    },
    // 检验单位列表表格页码改变
    async checkUnitListTablePageChange(page) {
      this.CheckUnitListArgs.offset = (page - 1) * this.CheckUnitListArgs.num;
      this.CheckUnitListCurrentPage = page;
      await this.searchCheckUnitList();
    },
    // 跳转到某个检验单位的详情页面
    gotoDetail(CheckUnit) {
      this.$router.replace({
        name: "reload",
        params: {
          to: "/qiping/dataservice/check/" + CheckUnit,
        },
      });
    },
    // 获取某个检验单位的详情数据
    async searchCheckUnitDetailData() {
      this.CheckUnitDetailArgs.CheckUnit = this.CheckUnit;
      const res = await searchCheckUnitDetailData(this.CheckUnitDetailArgs);
      this.CheckUnitDetailData = res.data;
      // 根据获取到的详情数据，绘制页面上一些图表
      // ...
      this.setCheckInfoChart(this.CheckUnitDetailData.CheckInfo);
      this.setGasTypeChart(this.CheckUnitDetailData.GasTypeInfo);
      this.setMediaChart(this.CheckUnitDetailData.MediaInfo);
      this.setGasWarningChart(this.CheckUnitDetailData.CheckWarningInfo);
    },
    // 获取某个定检单位的使用单位列表
    async searchCheckUnitSydwList() {
      this.CheckUnitSydwListLoading = true;
      this.CheckUnitSydwListArgs.CheckUnit = this.CheckUnit;
      // const res = await searchCheckUnitSydwList(this.CheckUnitSydwListArgs);
      // const { list, total } = res.data;
      const total = 73;
      const list = [
        {
          SydwId: "1989",
          Id: 1,
          GasCount: 1852,
          GasNeedCheckCount: 8,
          GasHistoryCheckCount: "1280",
          GasHistoryCheckPassCount: "1280",
          SydwName: "德州市佳和汽车配件销售有限公司",
          Address:
            "山东省德州市德城区（德州经济开发区）天衢东路315号（齐庄村委会院后）",
          Manager: "纪善河",
          Telphone: "0534-2755198",
          WFGasCount: 0,
          HJGasCount: 0,
          TZGasCount: 1852,
        },
        {
          SydwId: "2010",
          Id: 2,
          GasCount: 300,
          GasNeedCheckCount: 2,
          GasHistoryCheckCount: "203",
          GasHistoryCheckPassCount: "203",
          SydwName: "德州明荣天然气改装厂",
          Address: "德州经济开发区天衢东路齐庄315号",
          Manager: "钱明荣",
          Telphone: "15153417181",
          WFGasCount: 0,
          HJGasCount: 0,
          TZGasCount: 300,
        },
        {
          SydwId: "2012",
          Id: 3,
          GasCount: 50,
          GasNeedCheckCount: 4,
          GasHistoryCheckCount: "43",
          GasHistoryCheckPassCount: "43",
          SydwName: "禹城市颖华汽车配件有限公司",
          Address: "",
          Manager: "",
          Telphone: "",
          WFGasCount: 0,
          HJGasCount: 0,
          TZGasCount: 50,
        },
        {
          SydwId: "1992",
          Id: 4,
          GasCount: 253,
          GasNeedCheckCount: 8,
          GasHistoryCheckCount: "182",
          GasHistoryCheckPassCount: "182",
          SydwName: "德州经济开发区太平汽车修理厂",
          Address: "德州经济开发区双福大道南首（凯元热电厂西邻）",
          Manager: "马居祥",
          Telphone: "13505345614",
          WFGasCount: 0,
          HJGasCount: 0,
          TZGasCount: 253,
        },
        {
          SydwId: "2008",
          Id: 5,
          GasCount: 164,
          GasNeedCheckCount: 1,
          GasHistoryCheckCount: "119",
          GasHistoryCheckPassCount: "119",
          SydwName: "德州新驰汽车维修有限公司",
          Address: "",
          Manager: "",
          Telphone: "",
          WFGasCount: 0,
          HJGasCount: 0,
          TZGasCount: 164,
        },
      ];

      for (const item of list) {
        const rate = Number(
          (+item.GasHistoryCheckPassCount / +item.GasHistoryCheckCount) * 100
        ).toFixed(2);
        rate += "%";
        item.GasHistoryCheckPassRate = rate;
      }
      this.CheckUnitSydwListTableData = list;
      this.CheckUnitSydwListTotal = +total;
      this.CheckUnitSydwListLoading = false;
    },
    // 检验单位的使用单位列表表格页面大小改变
    async checkUnitSydwListTablePageSizeChange(pageSize) {
      this.CheckUnitSydwListArgs.num = pageSize;
      this.CheckUnitSydwListArgs.offset = 0;
      await this.searchCheckUnitSydwList();
    },
    // 检验单位的使用单位列表表格页码改变
    async checkUnitSydwListTablePageChange(page) {
      this.CheckUnitSydwListArgs.offset =
        (page - 1) * this.CheckUnitSydwListArgs.num;
      this.CheckUnitSydwListCurrentPage = page;
      await this.searchCheckUnitSydwList();
    },
    async setGasTypeChart(gasTypeData) {
      const gasTypeChartOption = {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: "pie",
        },
        title: {
          text: "气瓶种类",
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: false,
            },
            showInLegend: true,
          },
        },
        series: [
          {
            name: "气瓶品种",
            colorByPoint: true,
            data: [...gasTypeData],
          },
        ],
      };
      setTimeout(() => {
        this.gasTypeChart = new Highcharts.chart(
          "gas-type",
          gasTypeChartOption
        );
      }, 0);
    },

    async setMediaChart(mediaData) {
      const mediaChartOption = {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: "pie",
        },
        title: {
          text: "充装介质",
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: false,
            },
            showInLegend: true,
          },
        },
        series: [
          {
            name: "充装介质",
            colorByPoint: true,
            data: [...mediaData],
          },
        ],
      };
      setTimeout(() => {
        this.mediaChart = new Highcharts.chart("gas-media", mediaChartOption);
      }, 0);
    },

    async setCheckInfoChart(CheckInfo) {
      const checkInfoChartOption = {
        chart: {
          type: "column",
        },
        title: {
          text: "年度检验量",
        },
        subtitle: {},
        xAxis: {
          type: "category",
          labels: {
            rotation: 0, // 设置轴标签旋转角度
          },
          title: {
            text: "年份",
          },
        },
        yAxis: {
          min: 0,
          title: {
            text: "气瓶数",
          },
        },
        legend: {
          enabled: false,
        },
        series: [
          {
            name: "气瓶数",
            data: [...CheckInfo],
          },
        ],
      };
      setTimeout(() => {
        this.gasCheckChart = new Highcharts.chart(
          "gas-check",
          checkInfoChartOption
        );
      }, 0);
    },
    async setGasWarningChart(CheckWarningInfo) {
      for (const item of CheckWarningInfo) {
      }
      const gasWarningChartOption = {
        chart: {
          type: "column",
        },
        title: {
          text: "报检预警",
        },
        colors: ["#F37925"],

        subtitle: {},
        xAxis: {
          type: "category",
          labels: {
            rotation: 0, // 设置轴标签旋转角度
          },
          title: {
            text: "天数",
          },
        },
        yAxis: {
          min: 0,
          title: {
            text: "气瓶数",
          },
        },
        legend: {
          enabled: false,
        },
        series: [
          {
            name: "气瓶数",
            data: [...CheckWarningInfo],
          },
        ],
      };
      setTimeout(() => {
        this.gasWarningChart = new Highcharts.chart(
          "gas-warning",
          gasWarningChartOption
        );
      }, 0);
    },
  },
};
</script>

<style lang="less" scoped>
div.table {
  width: 135%;
  margin-left: 60px;
  margin-top: 30px;
  display: flex;
  flex-direction: row;
  // justify-content: center;
  div.container {
    width: 80%;
  }
}
div.page {
  width: 100%;
  display: flex;
  margin-top: 30px;
  flex-direction: row;
  justify-content: flex-end;
  position: relative;
  right: 300px;
}
div.detail-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  div.text-cards {
    width: 100%;
    display: flex;
    flex-direction: row;
    div.text-card {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      span {
        width: 98%;
        height: 40px;
        font-size: 17px;
        line-height: 40px;
        display: block;
        margin: 5px;
        text-align: center;
        font-weight: 700;
      }
      span.yello {
        color: black;
        background-color: #ffd966;
      }
      span.red {
        color: white;
        background-color: #ff0400;
      }
    }
  }
  div.charts {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
  }
  div.table {
    div.container {
      margin-left: -50px;
      width: 100%;
    }
  }
}
</style>